<!DOCTYPE html>
<!-- 
     <!DOCTYPE html>的重要性？ 
    1.作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
    document.compatMode：
    防止怪异模式BackCompat 浏览器使用自己的怪异模式解析渲染页面。
    标准模式 CSS1Compat 浏览器使用W3C的标准解析渲染页面
    那么compatMode默认就是BackCompat,
    
    这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。
    如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的
    标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
    这就是<!DOCTYPE html>的作用。

-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个项目</title>
    <style>
        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <div>
        <p>开学倒计时：</p>
        <span class="day"></span>
        <span class="day"></span>
        <span class="day"></span>
        <span class="day"></span>
    </div>
</body>
<script>
    //变量提升的本质   先命名后赋值
    /**
     * var web;
     * console.log(web)
     * web = 'hello js'
    */
    //     console.log(web) //undefined 不会报错
    //     var web ="hello js"

    //   var hd= ()=>{
    //         console.log(web2);
    //         var web2 = "hello js2"
    //     }
    //  hd()//undefined 不会报错


    //当用 let 定义变量是一定要先定义后使用 不会发生变量提升  会报错
    // console.log(web)
    // let web= "ad"

    // function tdc (){

    //     console.log(web)
    //     let web ="cc"
    // }
    // tdc()
    // let a = 1;
    // let b = a;
    // console.log(a, b);
    // //对b进行修改 如果是传的地址 那么 a也行该进行相应的变换
    // b = 3;
    // console.log(a, b);
    // let e = { name: '殷都皇家理工学院' };
    // let d = e;
    // console.log(e, d);
    // //对d的值进行修改  如果是传值 这e不会进行修改 反之这都会修改（传地址）
    // d.name = "软件工程";
    // console.log(e, d)
    /**
    * 结论
     * 1. 当为不同型变量是 会为新变量开辟一片内存空间
     * 2. 当为引用型变量（object） 会传递地址 两个变量公用一个地址
     * 3. 引用类型 所需空间较大 故 再起赋值是 传递的是地址 为了节省内存空间
    */
    /**
     * 标签的使用
    */

    // a: for (let i = 0; i < 10; i++) {
    //     b: for (let n = 0; n < 10; n++) {
    //         if (n + i % 2) {
    //             console.log(i); //1 3 5 7 9
    //         } else {
    //             continue a;//跳出 a 这次循环  当不写是  跳出当前循环
    //         }
    //     }

    // }

    // a: function c() {
    //     return console.log("a");
    // }
    // c()
    //let str = "www.baidu.com";
    //一个参数的时候
    // console.log(str.slice(1));
    // console.log(str.substring(1));
    // console.log(str.substr(1));
    // 三个都一样  ww.baidu.com
    //二个参数的时候
    // console.log(str.slice(1, 5));//ww.b  截取到下标为五的字符 不包括五
    // console.log(str.substring(1, 5));//ww.b
    // console.log(str.substr(1, 5));//ww.ba  从第一个下标开始向后截取五个
    //二个参数的时候
    // console.log(str.slice(0, 11 * -1));//co
    // console.log(str.substring(-3));//www.baidu.com  两个参数都不能为复数
    // console.log(str.substr(-3, 3));//com 第一个参数从后往前数三个（起始位置） 第二个参数为当前坐标向后数三个数
    // let a = str.substring(1, 2);
    // console.log(a);
    // console.log(str)
    // let fond;
    // for (let i = 0; i < str.length; i++) {
    //     if (str.includes(str[i])) {
    //         fond = true;
    //     }
    // }
    // console.log(fond)
    // console.log(str.indexOf('i', 8));
    // console.log(str.indexOf('o', 8));//从前往后找
    // console.log(str.lastIndexOf('.'));//从后往前找
    // // 截取字符串的应用 电话号码的模糊处理
    // function phone(moblie, len = 3) {
    //     return String(moblie).slice(0, len * -1) + "*".repeat(len);
    // }
    // console.log(phone(12345678910, 5))
    // let str = '99';
    // console.log(typeof (str * 1));
    // console.log(typeof Number(str));
    // console.log(typeof parseInt(str));
    // console.log(typeof parseFloat(str))
    // let num = 99;
    // console.log(typeof (num + ""));
    // console.log(typeof String(num));
    // console.log(typeof toString(num));
    // let str = "软件工程";
    // let arr = ['张三', '李四'];

    // console.log((str.split('')) instanceof Array);
    // console.log((str.split('')));

    // console.log(typeof (arr.join('')));
    // console.log((arr.join('')))
    //math 随机数
    //正常取  Math.floor(Math.random() * max+1)
    //中间取  start + Math.floor(Math.random() * (max-start)))  //max取得最大的数 start 最小的数
    // let index = Math.ceil(Math.random() * 1);//为什么要向下取整 如果向上取整这不会取到下标为零的数 故必须向下取整
    // console.log(index)
    //封装随机点名方法
    // function arrayRandom(array, start = 1, end) {
    //     end = end ? end : array.length;//为元素个数
    //     start--;//要从0开始  因为数组的索引开始 
    //     const index = start + Math.floor(Math.random() * (end - start));
    //     return array[index];
    // }
    // console.log(arrayRandom([1, 2, 3, 5, 66, 88]))
    //封装日期处理格式
    // const date = new Date();
    // function formatDate(date, format = "YY-MM-DD HH:mm:ss") {
    //     const config = {
    //         YY: date.getFullYear(),
    //         MM: date.getMonth() + 1,
    //         DD: date.getDate(),
    //         HH: date.getHours(),
    //         mm: date.getMinutes(),
    //         ss: date.getSeconds(),
    //     };
    //     for (const key in config) {
    //         format = format.replace(key, config[key]);
    //     }
    //     return format;
    // }
    let str = "YY年MM月DD日 HH时mm分ss秒";
    // console.log(formatDate(date, str));

    // for (const key in str) {

    //     str = str.replace(key, "张三");
    // }

    // console.log(str);
    str = str.replace('YY', 'AA');
    // console.log(str);
    const endDate = new Date("2022-09-1 00:00:00").getTime();
    let d, h, m, s;
    setInterval(() => {
        const statrDate = new Date().getTime();
        d = Math.floor((endDate - statrDate) / 1000 / 60 / 60 / 24);
        h = Math.floor((endDate - statrDate) / 1000 / 60 / 60 % 24);
        m = Math.floor((endDate - statrDate) / 1000 / 60 % 60);
        s = Math.floor((endDate - statrDate) / 1000 % 60);
        span = document.getElementsByClassName("day");
        span[0].innerHTML = d + '天';
        span[1].innerHTML = h + "：";
        span[2].innerHTML = m + "：";
        span[3].innerHTML = s;

    }, 1000);

    //console.table([1, 2, 3, 5, 6]);
    //console.error('s')
    // from 适用于有length属性的对象
    // let spans = document.querySelectorAll('.day');
    // Array.from(spans, function (item) {
    //     item.style.color = "pink";
    // });
    // let arr = "com";
    // console.log(arr.split(''));
    // console.log(Array.from(arr))
    //... 点语法应用场景
    let string = 'jscsshtml';
    [...string].map(item => {
        console.log(item);
    });
    function sum(...arr) {
        let sum = 0;
        for (const key in arr) {
            sum += parseInt(arr[key]);
        }
        return sum;
    }
    console.log(sum(100, 562, 5, 6, 8, 9, 74, 1, 22, 656, 6));//用于传递未知参数的个数
    let spans = document.querySelectorAll('.day');
    Array.from(spans).map(item => {
        item.style.fontSize = "50px";
    });
    [...spans].map(item => {
        item.addEventListener('click', () => {
            item.classList.toggle("hide");
            // console.log(this);//箭头函数的this指针指向的window对象 function函数中this指针指向当前对象

            //console.log(item);
        });
    })
</script>

</html>